<template>
  <div>
    <Col span="20">
      <Divider orientation="left">最近的博客</Divider>
      <Row>
        <List item-layout="vertical">
          <ListItem v-for="item in data" :key="item.title">
            <ListItemMeta
              :avatar="item.avatar"
              :title="item.title"
              :description="item.description"
            />
            {{ item.content }}
            <template slot="action">
              <Button type="primary" @click="jump(item)">查看</Button>
            </template>
            <template slot="extra">
              <img
                src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large"
                style="width: 280px"
              />
            </template>
          </ListItem>
        </List>
      </Row>
    </Col>
  </div>
</template>

<script>
export default {
  name: "Recent",
  data() {
    return {
      data: [
        {
          title: "This is title 1",
          description:
            "This is description, this is description, this is description.",
          avatar:
            "https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar",
          content:
            "This is the content, this is the content, this is the content, this is the content.",
          index: 1,
          id:1,
          createTime: 1,
        },
        {
          title: "This is title 2",
          description:
            "This is description, this is description, this is description.",
          avatar:
            "https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar",
          content:
            "This is the content, this is the content, this is the content, this is the content.",
          index: 2,
          id:2,
          createTime: 1,
        },
        {
          title: "This is title 3",
          description:
            "This is description, this is description, this is description.",
          avatar:
            "https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar",
          content:
            "This is the content, this is the content, this is the content, this is the content.",
          index: 3,
          id:3,
          createTime: 1,
        },
      ],
    };
  },
  methods: {
    jump(i) {
      
      window.open(`#/Article?id=${i.id}`, i.id);
    },
    async getRecentBlog() {
      let res = await this.send.get('/blog/getRecentBlogs');
      if(res.data.code == 200) {
        this.data = res.data.data;
      }
    }
  },
  async created() {
    //获取最近的博客
    await this.getRecentBlog();
  }
};
</script>

<style>
</style>